<template>
  <div class="Allmain">
    <div class="Headermain">
      <div small-bg>
        <dv-decoration5 :dur="2" style="width: 100%px; height: 40px" />
      </div>
      <span><h1>车联网平台数据概览</h1></span>
    </div>

    <div class="Bottommain">
      <div class="Leftmain">
        <div style="height: 40%; width: 100%">
          <div demo-bg style="height: 100%; color: aliceblue">
            <dv-border-box12>
              <div dv-bg class="l1main">
                <ul>
                  <li style="width: 100%">
                    车辆总数：<span style="color: orange; font-size: 40px">12,245</span>
                  </li>
                  <li style="width: 100%">
                    当前在线数：<span style="color: aqua; font-size: 40px">8,119</span>
                  </li>
                  <li style="width: 100%">
                    今日活跃数：<span style="color: brown; font-size: 40px">10,3317</span>
                  </li>
                  <li style="width: 100%">
                    今日活跃率：<span style="color: orange; font-size: 40px">83</span>
                  </li>
                </ul>
              </div>
            </dv-border-box12>
          </div>
        </div>
        <div style="margin-top: 10px; height: 30%; width: 100%">
          <div demo-bg style="height: 100%">
            <dv-border-box12>
              <div dv-bg style="height: 100%">
                <h2 style="color: aliceblue; margin-left: 10px">行业分类</h2>
                <AboutView></AboutView>
              </div>
            </dv-border-box12>
          </div>
        </div>
        <div style="margin-top: 10px; height: 30%; width: 100%">
          <div demo-bg style="height: 100%">
            <dv-border-box12>
              <div dv-bg style="height: 100%">
                <h2 style="color: aliceblue; margin-left: 10px">车型分类</h2>
                <Car></Car>
              </div>
            </dv-border-box12>
          </div>
        </div>
      </div>
      <div class="centermain">
        <China></China>
      </div>
      <div class="Rightmain">
        <div style="margin-top: 10px; height: 40%; width: 100%">
          <div demo-bg style="height: 100%">
            <dv-border-box12>
              <div dv-bg style="height: 100%">
                <h2 style="color: aliceblue; margin-left: 10px">本月行驶里程碑Top5</h2>
                <Carlcb></Carlcb>
              </div>
            </dv-border-box12>
          </div>
        </div>
        <div style="margin-top: 10px; height: 30%; width: 100%">
          <div demo-bg style="height: 100%">
            <dv-border-box12>
              <div dv-bg style="height: 100%">
                <h2 style="color: aliceblue; margin-left: 10px">报警车辆Top5</h2>
                <Carbj></Carbj>
              </div>
            </dv-border-box12>
          </div>
        </div>
        <div style="margin-top: 10px; height: 30%; width: 100%">
          <div demo-bg style="height: 100%">
            <dv-border-box12>
              <div dv-bg style="height: 100%">
                <h2 style="color: aliceblue; margin-left: 10px">电池报警车辆Top5</h2>
                <Carbj2></Carbj2>
              </div>
            </dv-border-box12>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { BorderBox12 as DvBorderBox12 } from "@kjgl77/datav-vue3";
import AboutView from "./AboutView.vue";
import Car from "./Car.vue";
import Carlcb from './Carlcb.vue'
import Carbj from './Carbj.vue'
import Carbj2 from './Carbj2.vue'
import China from "./China.vue";
</script>
<style lang="scss" scoped>
.Allmain {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: rgb(11, 40, 147);

  .Headermain {
    width: 100%;
    height: 80px;
    align-items: center;
    color: aliceblue;
    span > h1 {
      margin: 0 40%;
    }
  }

  .Bottommain {
    width: 100%;
    height: 85%;
    display: flex;
    .Leftmain {
      width: 30%;
      height: 100%;
      .l1main {
        width: 100%;
        height: 100%;

        ul {
          margin-left: -30px;
          height: 100%;
          flex-direction: column;
          justify-content: space-around;
          display: flex;
          list-style: none;
        }
      }
    }
    .centermain {
      width: 40%;
      height: 100%;
    }
    .Rightmain {
      width: 30%;
      height: 100%;
    }
  }
}
</style>
